<template>
  <div class="state-flow-block">
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round order"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">订单已提交</div>
        <div class="time">17：15</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc"></div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round shop"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">支付成功</div>
        <div class="time">17：15</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc">请耐心等待商家接单</div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round shop"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">商家已接单</div>
        <div class="time">17：15</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc">商品准备中</div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round carry"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">骑手正赶往商家</div>
        <div class="time">17：16</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc"></div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round carry"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">骑手已取货</div>
        <div class="time">17：19</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc">请等待配送</div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round done"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">订单完成</div>
        <div class="time">17：26</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc"></div>
      </div>
    </div>
    <div class="stateflowitem">
      <div class="main">
        <div class="icon-block">
          <div
            class="avatar round carry"
            style="
              background-image: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/cff44038a7c735757c722ee49a29aded.png);
            "
          ></div>
        </div>
        <div class="title">已送达</div>
        <div class="time">17：26</div>
      </div>
      <div class="desc-block">
        <div class="icon-block">
          <div class="time-axis"></div>
        </div>
        <div class="desc">请确认收货</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({})
</script>

<style lang="scss" scoped>
.state-flow-block {
  margin-bottom: 7rem;
  padding-top: 10px;
}
.stateflowitem {
  color: #999999;
  background: #fff;
  padding: 0 15px;
}
.stateflowitem .main {
  display: flex;
  align-items: center;
}
.stateflowitem .icon-block {
  width: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stateflowitem .round {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 1162% auto;
  border-radius: 100%;
}
.stateflowitem .main .title {
  flex: 1;
  margin-left: 5px;
  font-size: 15px;
  color: #666666;
}
.stateflowitem .main .time {
  font-size: 12px;
}
.stateflowitem .desc-block {
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 40px;
}
.stateflowitem .icon-block {
  width: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stateflowitem .icon-block .time-axis {
  width: 1px;
  background-color: #cccccc;
  height: 40px;
}
.stateflowitem .desc-block .desc {
  font-size: 14px;
  margin-left: 5px;
}
.stateflowitem .round.order {
  background-position: 32.123% 96.491%;
}
.stateflowitem .round.shop {
  background-position: 52.781% 96.491%;
}
.stateflowitem .round.carry {
  background-position: 1.135% 96.491%;
}
.stateflowitem .round.done {
  background-position: 11.464% 96.491%;
}
.stateflowitem:last-child .round.carry {
  background-position: 1.159% 58.427%;
}
.stateflowitem:last-child .round {
  width: 33px;
  height: 33px;
  background-size: 952% auto;
}
.stateflowitem:last-child .time-axis {
  display: none;
}
</style>
